<template>
  <div>
    <el-card>
      <el-row>
        <el-col :span="6" style="color: #F56C6C">
          <a style="float:left ">
            <div>
              <el-button type="primary" icon="el-icon-edit" circle @click="toQuestionPublish"></el-button>
            </div>
            <div>写问题</div>
          </a>
        </el-col>
        <el-col :span="6">
          <a style="float:left ">
            <div>
              <el-button type="warning" icon="el-icon-circle-plus" circle @click="toForked"></el-button>
            </div>
            <span>关注问题</span>
          </a>
        </el-col>
        <el-col :span="6">
          <a style="float:left ">
            <div>
              <el-button type="success" icon="el-icon-message" circle></el-button>
            </div>
            <span>好友</span>
          </a>
        </el-col>
        <el-col :span="6">
          <a style="float:left ">
            <div>
              <el-button type="danger" icon="el-icon-share" circle></el-button>
            </div>
            <span>写想法</span>
          </a>
        </el-col>
      </el-row>
      <hr style="soild 1px" />
      <el-row>
        <div>好友列表</div>
        <el-table :data="frinedList">
          <el-table-column label="头像">
            <template slot-scope=" scope">
              <avater :username="scope.row.username"></avater>
            </template>
          </el-table-column>
          <el-table-column label="姓名" prop="username"></el-table-column>
          <el-table-column label="邮箱" prop="email"></el-table-column>
        </el-table>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import avater from "vue-avatar";
import {getFriends} from '../api/index'
import storage from "../model/storage";
export default {
  name: "GropWrite",
  components: {
    avater
  },
  methods: {
    toQuestionPublish() {
      this.$router.push("/question");
    },
    toForked() {
      this.$router.push("/forkedQuestion");
    }
  },
  data() {
    return {
      frinedList: [
        {
          username: "你要是看到我肯定没登录",
          email: "123456@qq.com"
        },
        {
          username: "你要是看到我肯定没登录",
          email: "123456@qq.com"
        }
      ],
      //当前用户的信息
      user: {
        uid: "",
        uname: ""
      }
    };
  },
  created() {
    //从哪store中取出用户的信息
    this.user.uname = storage.get("username");
    this.user.uid = storage.get("uid");
    if (this.user.uid != null) {
      console.log(this.user.uname);
      getFriends(this.user.uid).then(result=>{
          console.log(result.data.friendList)
          this.frinedList=result.data.friendList
      })

    }
  }
};
</script>

<style scoped>
.el-card a {
  size: 10px;
  margin-right: 30px;
}
</style>
